<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<link href="videojs/video-js.min.css" rel="stylesheet">
		<link rel="stylesheet" href="videojs/videojs-playlist-ui/dist/videojs-playlist-ui.vertical.css" />
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="videojs/video.min.js"></script>
		<script type="text/javascript" src="videojs/videojs-playlist.min.js" ></script>
		<script type="text/javascript" src="videojs/videojs-playlist-ui/dist/videojs-playlist-ui.js" ></script>
		<title>videojs</title>
	</head>
	<style>
		.hide {
			display: none;
		}
		.video {
			width: 400px;
		}
		.playlist {
			width: 400px;
		}
	</style>

	<body>
		<div class="video">
			<video id="player" class="video-js vjs-styles-defaults vjs-fluid vjs-big-play-centered">
				<!--<source src="//vjs.zencdn.net/v/oceans.mp4">-->
			</video>
		</div>
		<div class="question hide">
			<form action="" method="post">

				<p>1 + 1 = ?</p>
				<input type="radio" value="1" />A、 1<br>
				<input type="radio" value="2" />B、 2<br>
				<input type="radio" value="3" />C、 3<br>
				<input type="radio" value="4" />D、 4<br>
				<input type="submit" value="提交" />
			</form>
		</div>
		<div id = "playList" class="vjs-playlist playlist"></div>
		
	</body>
	<script type="text/javascript">
		var player = videojs('player', {
			controls: true, //控制条：boolean
			controlBar: {
				playToggle: {
					replay: false
				},
				progressControl: false,
				currentTimeDisplay: true
			}
		}, function onPlayerReady() {
			// 修改this指向
			var vdthis = this;
			videojs.log('播放器已经准备好了!');

			//this.play();

			this.on('ended', function() {
				videojs.log('播放结束了!');
			});
			/**
			 * 监听事件更新
			 */
			var isAsk = false;
			this.on('timeupdate', function(e) {
				videojs.log(vdthis.currentTime())

				if(!isAsk && vdthis.currentTime() >= 5) {
					vdthis.pause();
					$('.video').addClass("hide")
					$('.question').removeClass("hide")
					setTimeout(function() {
						$('.video').removeClass("hide")
						$('.question').addClass("hide")
						vdthis.play();
					}, 5000)
					isAsk = true;
				}
			})

		});
		
		player.playlist([{
			name: '01',
		  sources: [{
		    src: 'http://media.w3.org/2010/05/sintel/trailer.mp4',
		    type: 'video/mp4'
		  }],
		  poster: 'http://media.w3.org/2010/05/sintel/poster.png'
		}, {
			name: '02',
		  sources: [{
		    src: 'http://media.w3.org/2010/05/bunny/trailer.mp4',
		    type: 'video/mp4'
		  }],
		  poster: 'http://media.w3.org/2010/05/bunny/poster.png'
		}, {
			name: '03',
		  sources: [{
		    src: 'http://vjs.zencdn.net/v/oceans.mp4',
		    type: 'video/mp4'
		  }],
		  poster: 'http://www.videojs.com/img/poster.jpg'
		}, {
			name: '04',
		  sources: [{
		    src: 'http://media.w3.org/2010/05/bunny/movie.mp4',
		    type: 'video/mp4'
		  }],
		  poster: 'http://media.w3.org/2010/05/bunny/poster.png'
		}, {
			name: '05',
		  sources: [{
		    src: 'http://media.w3.org/2010/05/video/movie_300.mp4',
		    type: 'video/mp4'
		  }],
		  poster: 'http://media.w3.org/2010/05/video/poster.png'
		}]);
		 
		player.playlistUi({
			el: document.getElementById('playList')
		});
		// Play through the playlist automatically.
		//player.playlist.autoadvance(0);
	</script>

</html>